<template>
  <div id="buy">
    <div class="tab_box">
      <button @click="active_name = 0" :class="{ active: active_name == 0 }">购买会员</button>
      <button @click="active_name = 3" :class="{ active: active_name == 3 }">兑换会员</button>
      <button @click="active_name = 1" :class="{ active: active_name == 1 }">购买记录</button>
      <button @click="active_name = 2" :class="{ active: active_name == 2 }">会员权益</button>
      <button @click="active_name = 4; noReadCoupon = 0" :class="{ active: active_name == 4 }"><div v-if="noReadCoupon" class="btn-tips">{{noReadCoupon}}</div>卡券包</button>
    </div>
    <div class="tab_content_box">
      <!-- <buy01 :VipType01="VipType01" @return_back="changed" v-if="active_name == '0'" /> -->
      <buy01 :VipType01="VipType01" @return_back="changed" v-if="active_name == '0'" />
      <buy02 v-if="active_name == '1'" />
      <buy03 :VipType01="vipInitLevel" @return_back="changed" v-if="active_name == '2'" />
      <buy04 v-if="active_name == '3'" />
      <buy05 v-if="active_name == '4'" />
    </div>
  </div>
</template>
<script>
import buy01 from './buy01';
import buy02 from './buy02';
import buy03 from './buy03';
import buy04 from './buy04';
import buy05 from './buy05';
export default {
  name: 'buy',
  components: { buy01, buy02, buy03, buy04, buy05 },
  data() {
    return {
      active_name: '0',
      VipType01: 2, //默认SVIP个人版会员
      vipInitLevel: '',
      noReadCoupon: 0
    };
  },
  computed: {},
  created() {
    if (this.$route.params.id) {
      this.active_name = this.$route.params.id;
    }
    let levelQuery = this.$route.query.l;
    let level = localStorage.getItem('vipLevel');
    let levelIdx1 = this.filterTabIndex(level);
    if(levelQuery){ //如果外部进来定位到某一个 tab ，如果用户VIP等级 <= 定位顶级，跳到指定tab，否则默认tab - plus 
      let levelIdx2 = this.filterTabIndex(levelQuery);
      if(levelIdx1 <= levelIdx2){
        this.VipType01 = levelQuery;
      }
    }else{  //如果当前用户等级小于 SVIP个人版，则定位到SVIP个人版
      if(levelIdx1 <= this.filterTabIndex(5)){
        this.VipType01 = 5;
      }else{
        this.VipType01 = level;
      }
    }
  },
  mounted() {
    this.GetNoReadCouponCount()
  },
  watch:{
    // active_name(val){
    //   this.GetNoReadCouponCount()
    //   if(val==4){
    //     this.noReadCoupon = 0
    //   }
    // }
  },
  methods: {
    // 获取有几条为读优惠券
    GetNoReadCouponCount(){
      this.$axios.get("/api/customer/GetNoReadCouponCount").then(res=>{
        if(!res.data.code){
          this.noReadCoupon = res.data.data;
        }
      })
    },
    changed(parm, i) {
      this.VipType01 = i;
      this.active_name = parm;
    },
    filterTabIndex(num) {
      //获取会员级所对应的下标
      let idx = 0;
      if (num == 4) {
        idx = 0;
      } else if (num == 5) {
        idx = 1;
      } else if (num == 1) {
        idx = 2;
      } else if (num == 2) {
        idx = 3;
      }
      return idx;
    },
    // get_person() {
    //   this.$axios({
    //     method: "get",
    //     url: "/api/customer/getperson"
    //   })
    //     .then(response => {
    //       if (response.data.code == 0) {
    //         this.vipInitLevel = response.data.data.vipLevel1;
    //         // this.vipInitLevel = 4;
    //         this.VipType01 = response.data.data.vipLevel;
    //         //  this.VipType01 = 4;
    //       }
    //     })
    //     .catch(error => {
    //       console.log(error);
    //     });
    // }
  }
};
</script>
<style scoped lang="less">
.placeholder {
  background-color: #f5f5f5;
  height: 100px;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
#buy {
  box-sizing: border-box;
  position: relative;
  // background: #fff;
  margin: 0 13px 0 13px;
  margin-top: -80px;
  // padding: 0 20px;
  padding-top: 80px;
  // padding-bottom: 20px;
  min-height: 100vh;
}
.tab_box {
  font-size: 0;
  padding: 14px 1px 10px;
  button {
    position: relative;
    display: inline-block;
    width: 100px;
    // padding: 1px 22px;
    // box-sizing: border-box;
    line-height: 38px;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    color: #555;
    // &:hover,
    &.active {
      background-color: #fd7f2c;
      color: #fff;
    }
    &.active:hover {
      color: #fff !important;
    }
    margin-right: 10px;
  }
  button:hover {
    color: #fd7f2c;
  }
  .btn-tips{
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
	  line-height: 16px;
    text-align: center;
	  background-color: #fd7f2c;
	  border-radius: 8px;
  }
}
.tab_content_box {
  height: calc(100% - 60px);
  background-color: #fff;
  border-radius: 4px;
}
</style>
